<template>
  <div class="correct">
    <t-dialog
        v-model:visible="visible"
        width="460"
        placement="center"
        :on-close="onClose"
        :cancel-btn="null"
        :confirm-btn="null"
    >
      <template #header>
        <div class="headerBox">
          <span class="titleText">评分纠正</span>
        </div>
      </template>
      <template #body>
        <t-form
            ref="form"
            :data="formData"
            :label-align="'top'"
            :rules="rules"
            scroll-to-first-error="smooth"
            @submit="handleConfirm"
        >
          <t-form-item label="纠正原因" name="type">
            <t-radio-group v-model="formData.type" @change="onTypeChange" :disabled="isTransfer">
              <t-radio :value="1">转写原因</t-radio>
              <t-radio :value="2">其他原因</t-radio>
              <t-radio :value="3">转写纠正</t-radio>
              <t-radio :value="4">话者分离错误</t-radio>
            </t-radio-group>
          </t-form-item>

          <t-form-item label="质检项" name="qualityRuleName" v-if="formData.type === 1 || formData.type === 2">
            <t-input disabled v-model="formData.qualityRuleName"></t-input>
          </t-form-item>

          <t-form-item label="原文本" name="text" v-show="formData.type === 1 || formData.type === 3">
            <t-textarea
                disabled
                v-model="formData.text"
                name="description"
                :autosize="true"
            />
          </t-form-item>

          <t-form-item label="纠正文本" name="redressText" v-if="formData.type === 1 || formData.type === 3" help="请根据“原文本”输入完整内容并完成纠错，切勿仅输入纠正的字、词">
            <t-textarea
                v-model="formData.redressText"
                placeholder="请输入纠正文本"
                name="description"
                :autosize="true"
            />
          </t-form-item>

          <t-form-item label="评分更正" class="scoreSgn" name="score" v-show="formData.type === 1 || formData.type === 2" help="手动评分会覆盖评分纠正的结果">
            <t-select class="c_select" v-model="formData.sgn">
              <t-option key="add" label="+" :value="1" />
              <t-option key="reduce" label="-" :value="0" />
            </t-select>
            <t-input-number class="c_input_number" v-model="formData.score" align="left" theme="normal" />
            <div class="scoreText">分</div>
          </t-form-item>

          <t-form-item label="评语" v-if="formData.type === 1 || formData.type === 2" name="remark">
            <t-textarea
                placeholder="请输入评语"
                name="description"
                :autosize="{ minRows: 3, maxRows: 3 }"
                v-model="formData.remark"
            />
          </t-form-item>

          <t-form-item label="错误类型" v-if="formData.type === 4" name="errorTyep">
            <t-radio-group v-model="formData.errorTyep">
              <t-radio :value="1">客户座席混淆</t-radio>
              <t-radio :value="2">客户座席互换</t-radio>
            </t-radio-group>
          </t-form-item>

          <t-form-item class="footerItem">
            <t-space size="small">
              <t-button theme="default" @click="handleCancel" class="cancelBtn" variant="base">取消</t-button>
              <t-button theme="primary" class="confirmBtn hoverBlue" type="submit">保存</t-button>
            </t-space>
          </t-form-item>
        </t-form>
      </template>
      <template #footer>
      </template>
    </t-dialog>
  </div>
</template>

<script setup>
import {nextTick, reactive, ref, toRaw, watch} from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import {resultRedress, inspection} from "../../../api/qualityResult";

const props = defineProps({
  scoreVisible: Boolean,
  correctData: Object,
  closeCorrectDialog: Function,
  isTransfer: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits()
const visible = ref(false);
const maxScore = ref()
watch(() => props.scoreVisible, (newVal, oldVal) => {
  if(newVal) {
    // console.log('correctData', toRaw(props.correctData))
    const data = toRaw(props.correctData)

    // 获取最大评分值
    inspection(data.templateId, data.qualityRuleId).then(res => {
      maxScore.value = res.data.initialScore
    })

    data.redressText = data.text
    if(data.score >= 0) {
      data.sgn = 1
    } else {
      data.sgn = 0
      data.score = data.score * -1
    }
    data.type = 1

    Object.assign(formData, toRaw(props.correctData))
  }
  visible.value = newVal
})
const positiveNumber = (val) => {
  if (val && val < 0) {
    return { result: false, message: '请输入正数！', type: 'error' };
  }
  if(val > maxScore.value) {
    return { result: false, message: `可输入最大值为${maxScore.value}`, type: 'error' };
  }
  return { result: true };
};
const rules = {
  type: [{ required: true, message: '请选择纠正原因', type: 'error' }],
  redressText: [{ required: true, message: '请输入纠正内容', type: 'error', trigger: 'blur' }],
  score: [
    { required: false, message: '请输入数字', type: 'error' },
    { validator: positiveNumber },
  ],
  errorTyep: [{ required: true, message: '请选择错误类型', type: 'error', }],
}
const formData = reactive({
  redressText: ''
})
watch(() => props.isTransfer, (newVal, oldVal) => {
  if(newVal.toString() === 'true') {
    nextTick(() => {
      formData.type = 3
    })

  }
})
const form = ref()
const onTypeChange = () => {
  form.value?.reset({ fields: ['remark', 'errorTyep'] });
}

// 确定
const handleConfirm = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    let data = JSON.parse(JSON.stringify(formData))
    if(data.type === 2 && !data.score) {
      return MessagePlugin.error('请输入评分更正')
    }
    if(data.sgn === 0) {
      data.score = data.score * -1
    }

    resultRedress(data).then(res => {
      if(res.code === 0) {
        MessagePlugin.success('纠正成功！')
        form.value?.reset()
        emits('closeCorrectDialog', 1)
      }
    })
  }
}
// 取消
const handleCancel = () => {
  form.value?.reset()
  emits('closeCorrectDialog', 0)
}
const onClose = () => {
  form.value?.reset()
  emits('closeCorrectDialog', 0)
}
</script>

<style lang="scss" scoped>
.correct {
  :deep(.t-dialog) {
    padding: 24px 22px 0 22px;
  }
  :deep(.t-dialog__header) {
    .headerBox {
      display: flex;
      .infoIcon-svg-icon {
        height: 24px;
        width: 24px;
        margin-right: auto;
      }
      .titleText {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
    }

  }
  :deep(.t-dialog__body) {
    padding-bottom: 2px;
    .t-form {
      .t-form__item {
        //overflow: hidden;
        margin-bottom: 16px;
        .t-form__label {
          font-size: 13px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
        }
        .t-form__controls {
          .t-form__controls-content {
            //overflow: hidden;
          }
          //overflow: hidden;
          .t-radio-group {
            .t-radio {
              font-size: 12px;
              font-weight: 400;
              color: rgba(92, 91, 91, 1);
              .t-radio__label {
                font-size: 12px;
                font-weight: 400;
                color: rgba(92, 91, 91, 1);
              }
            }
            .t-is-checked {
              .t-radio__label {
                color: rgba(51, 51, 51, 1) !important;
              }
            }
          }
          .t-input__wrap {
            height: 28px;
            .t-input {
              height: 28px;
            }
          }
          .t-textarea {
            //height: 28px;
            .t-textarea__inner {
              height: 28px;
              padding: 2px 8px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(97, 96, 96, 1);
              resize:none;
              min-height: unset !important;
            }
          }
        }
      }
      .scoreSgn {
        .t-form__controls-content {
          display: flex;
          .c_select {
            width: 74px;
            height: 28px;
            opacity: 1;

            .t-select-input {
              .t-input__wrap {
                .t-input {
                  border-radius: 3px 0 0 3px;
                  background: rgba(243, 243, 243, 1);
                  border-left: 1px solid rgba(220, 220, 220, 1);
                  border-top: 1px solid rgba(220, 220, 220, 1);
                  border-bottom: 1px solid rgba(220, 220, 220, 1);
                  border-right: unset;
                  height: 28px;
                  line-height: 28px;
                  .t-input__inner {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(12, 13, 14, 1);
                  }
                }
              }
            }
          }
          .c_input_number {
            flex: 1;
            .t-input {
              border-radius: unset;
            }
          }
          .scoreText {
            width: 36px;
            height: 28px;
            line-height: 28px;
            text-align:  center;
            border-radius: 0 3px 3px 0;
            background: rgba(243, 243, 243, 1);
            border-top: 1px solid rgba(220, 220, 220, 1);
            border-right: 1px solid rgba(220, 220, 220, 1);
            border-bottom: 1px solid rgba(220, 220, 220, 1);
            border-left: unset;
            font-size: 12px;
            font-weight: 400;
            color: rgba(12, 13, 14, 1);
          }
        }
      }
    }
    .footerItem {
      padding-top: 15px;
      .t-form__controls-content {
        justify-content: right;
      }
    }
  }
  :deep(.t-dialog__footer) {
    display: none;
  }

  :deep(.t-radio-group) {
    .t-radio__label {
      font-size: 12px;
      font-weight: 400;
      color: rgba(92, 91, 91, 1);
    }
  }
  .cancelBtn {
    height: 28px;
    width: 60px;
    background: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
  .confirmBtn {
    height: 28px;
    width: 60px;
    background: rgba(30, 117, 254, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
